<template>
  <div class="sub-category">
      <!-- 分类导航 -->
    <van-grid :gutter="10" :column-num="3">
      <van-grid-item
       v-for="category in categories"
        :key="category.id"
        :icon="category.imageUrl"
        :text="category.title" />
    </van-grid>
    <!-- 分割线 -->
    <van-divider
    :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 50px' }"
    >
      推荐
    </van-divider>
    <!-- 商品推荐 -->
    <van-grid :border="false" :column-num="2">
        <van-grid-item
        v-for="reco in recommend"
        :key="reco.id">
            <van-image :src="reco.image" />
            <span></span>
        </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories, getGengduo } from '@/api/category'
export default {
  name: 'SubCategory',

  data() {
    return {
      categories: [],
      recommend: [],

    }
  },
  watch: { // 监听路由变化
    $route: {
      handler(newVal, oldVal) {
        // console.log('路由变化了,', newVal.params.cid)
        // 根据父级分类id查询子分类
        getSubCategories(newVal.params.cid)
          .then(data => {
            this.categories = data.categories
          })
          .catch(err => console.log('err:', err))

        getGengduo(newVal.params.cid)
          .then(data => {
            this.recommend = data.items.list
          })
          .catch(err => console.log('err:', err))
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style>

</style>
